<template>
  <div class="shopping_bg">
    <!-- 上方图片 -->
    <el-image :src='url' :fit='fit'></el-image>

    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item ><a href="/">首页</a></el-breadcrumb-item>
      <el-breadcrumb-item>优秀作品</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider ></el-divider>

                <el-carousel :interval="4000" type="card" height="250px" arrow="never" indicator-position="none">
                <el-carousel-item v-for="item in imgList" :key="item.id">
                  <!-- <img :src="item.url"/> {{item.url}} -->
                  <el-image :fit="fit" :src="item.url"></el-image>
                  </el-carousel-item>
                </el-carousel>

<el-divider ></el-divider>
    <div class="video_box">
        <video
        id="myVideo"
        class="video-js"
        >
        <source
            src="//vjs.zencdn.net/v/oceans.mp4"
            type="video/mp4"
        >
        </video>

    </div>
    <el-divider ></el-divider>
    <audio src="../../assets/testaudio.mp3" controls="controls"></audio>

  </div>
</template>

<script>
  import nameImg from '@/assets/workBG.jpg'
  import img3_2 from '@/assets/img3_1.jpg'
  import img3_3 from '@/assets/sola.jpg'
  import img3_4 from '@/assets/bg2.jpg'
  export default {
    data() {
      return {
      	queryInfo: {
        query: '',
        pageNo: 1,
        pageSize: 5
      },
        fit: 'fill',
        url: nameImg,
        imgList:[
          {
            id: 1,
            url:img3_2
          },
          {
            id: 2,
            url:img3_3
          },
          {
            id: 3,
            url:img3_4
          },
          {
            id: 4,
            url:img3_2
          },
          {
            id: 5,
            url:img3_3
          }
        ]
      }
    },
    mounted() {
            this.initVideo();
        },
    methods:{
    	async getimgList() {
        const { data: res } = await this.$http.get('SchoolTeacher', {
            params: this.queryInfo
        })

        if (res.code !== 200) {
            return this.$message.error('获取教师列表失败！')
        }
        this.imgList = res.data.info
        this.total = res.data.total
    },
      initVideo() {
              //初始化视频方法
              let myPlayer = this.$video(myVideo, {
                  //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
                  controls: true,
                  //自动播放属性,muted:静音播放
                  autoplay: "",
                  //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
                  preload: "auto",
                  //设置视频播放器的显示宽度（以像素为单位）
                  width: "300px",
                  //设置视频播放器的显示高度（以像素为单位）
                  height: "200px"
              });
              }
    }
  }
</script>

<style>
  .shopping_bg {
    height: 1500px;
    width: 100%;
/*    background: url(../../assets/bg1.jpg) no-repeat;
    background-size: 100% 1000px; */
  }

  .shopping_bg .el-image {
    width: 100%;
    height: 37%;
    max-height: 370px;
    margin-top: 0%;
    margin-left: 0%;

  }
  .shopping_bg .el-breadcrumb{
    margin: 30px 15%;
    font-size: 14px;
  }
  .shopping_bg .el-divider {

    background: rgb(20,94,11);
    width: 88%;
    margin-left: 6%;

  }

  .shopping_bg .el-carousel{
    width: 80%;
    margin: 100px 10%;
    /* background: #409EFF; */
  }

  .shopping_bg .el-carousel__item .el-image{
    height: 100%;
    width: 100%;
  }
  .shopping_bg .video_box{
    background: #000000;
    width: 300px;
    margin-left: 10%;
    left: 20%;
  }
  .shopping_bg .video_box video{
    /* margin-left: 10%; */
  }

</style>
